<template>
    <div class="personnel">
         <public-header></public-header>
            <!-- <van-search
                v-model="searchvalue"
                show-action
                 background="#1989fa"
                placeholder="请输入搜索关键词"
                @search="onSearch"
                >
                <div slot="action" @click="onSearch" style="height:34px;line-height:34px">
                    <van-icon name="friends-o" size="24" color="white" style="margin-top:5px"/>
                </div>
            </van-search> -->
            <van-search v-model="searchvalue" background="#07c160" placeholder="请输入搜索关键词" />
        <div style="text-align:left">
            <van-cell title="邀请新用户" />
            <van-cell >
                <template slot="title">
                    <span class="custom-title">审批处理</span>
                    <van-tag round type="danger">6</van-tag>
                </template>
            </van-cell>
            <van-index-bar :index-list="indexList">
                <van-index-anchor index="1">标题1</van-index-anchor>
                <van-cell title="文本" >
                    <van-button slot="right-icon" type="primary" size="mini">查看</van-button>
                    <van-button slot="right-icon" @click="showPop" type="info" size="mini">授权</van-button>
                    <van-button slot="right-icon" type="danger" size="mini">禁用</van-button>
                </van-cell>
                <van-cell title="文本" />
                <van-cell title="文本" />

                <van-index-anchor index="2">标题2</van-index-anchor>
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="3">标题3</van-index-anchor>
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="4">标题4</van-index-anchor>
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="5">标题5</van-index-anchor>
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="6">标题6</van-index-anchor>
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="7">标题7</van-index-anchor>
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="8">标题8</van-index-anchor>
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
            </van-index-bar>
            <van-popup
                v-model="show"
                position="bottom"
                :style="{ height: '30%' }"
            >
                <div class='popBtns'>
                    <div @click="show = false" style="text-align:left;width:50%;margin-left:10px">取消</div>
                    <div @click="confime" style="text-align:right;width:50%;margin-right:10px">确定</div>
                </div>
                <van-tree-select
                    :items="items"
                    :active-id.sync="activeIds"
                    :main-active-index.sync="activeIndex"
                />
            </van-popup>
        </div>
    </div>
</template>

<script>
import  publicHeader  from '@/components/publicHeader';
import { 
    Button
    ,NavBar
    ,Icon
    ,PullRefresh 
    ,List
    ,SwipeCell
    ,Collapse
    , CollapseItem
    ,Divider
    ,Panel
    ,DropdownMenu
    , DropdownItem
    ,Search
    ,Dialog
    ,Sticky
    ,IndexBar
    , IndexAnchor 
    ,Cell
    , CellGroup 
    ,Tag
    ,Popup
    ,TreeSelect
    } from 'vant';
export default {
    name: 'index',
    components: {
        publicHeader,     
        [TreeSelect.name]:TreeSelect,
        [Popup.name]:Popup,
        [Tag.name]:Tag,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [IndexBar.name]:IndexBar,
        [IndexAnchor.name]:IndexAnchor,
        [Sticky.name]:Sticky,
        [NavBar.name]:NavBar,
        [Button.name]:Button,
        [Icon.name]:Icon,
        [PullRefresh.name]:PullRefresh,
        [List.name]:List,
        [SwipeCell.name]:SwipeCell,
        [Collapse.name]:Collapse,
        [CollapseItem.name]:CollapseItem,
        [Divider.name]:Divider,
        [Panel.name]:Panel,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Search.name]:Search,
        [Dialog.name]:Dialog,
    },
    data () {
        return {
            show:false,
            searchvalue:'',
            indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            activeIds: [1, 2],
            activeIndex: 0,
            items:[
                {
                    text: '所有城市',
                    dot: true,
                    className: 'my-class',
                    children: [
                    {
                        text: '温州',
                        id: 1,
                    },
                    {
                        text: '杭州',
                        id: 2
                    }
                    ]
                },
                {
                    text: '其他',
                    dot: true,
                    className: 'my-class',
                    children: [
                    {
                        text: '其他',
                        id: 3,
                    }
                    ]
                }
            ]
        }
    },
    created() {
    },
    methods:{
        onSearch(){
        },
        showPop(){
            this.show = true
        },
        confime(){
            this.show = false
        }
    

    }
}
</script>
<style >
.popBtns{
    width:100%;
    height: 40px;
    display: flex;
    line-height: 40px;
    color: #07c160;
    font-size:14px;
    justify-content: space-around;
}
.van-tree-select__item--active{
    color: #07c160;
}
.van-sidebar-item--select {
    border-color: #07c160;
}
</style>
